<template>
  <div class="app-container">

    <div class="table-action-wrapper">
      <el-button @click="beforeAddMonograph" style="margin-bottom: 20px"
        >添加专著</el-button
      >
      <el-input
        placeholder="按照专著内容搜索"
        v-model="filter"
        @change="handleFilterChange"
        style="margin-left: 20px; width: 300px"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <el-button @click="handleFilterReset" style="margin-left: 20px" type="primary">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="filterList"
      element-loading-text="Loading"
      border
      highlight-current-row
      :default-sort="{ prop: 'job', order: 'descending' }"
    >
      <el-table-column label="内容">
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" label="首页展示">
        <template slot-scope="scope">
          <i
            style="font-size: 18px"
            class="el-icon-star-off"
            v-if="scope.row.show == 0"
          ></i>
          <i
            style="font-size: 22px; color: #409eff"
            class="el-icon-star-on"
            v-else
          ></i>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" label="语言"
        >语言
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.i18n }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="beforeUpdataMonograph(scope.row)"
            style="margin-right: 15px"
            >编辑</el-button
          >

          <el-popconfirm
            @onConfirm="handleDeletMonograph(scope.row)"
            title="确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="专著信息" :visible.sync="drawer" direction="rtl">
      <el-form :model="monographObj" label-width="60px">
        <el-form-item label="内容">
          <SimpleEditor :content.sync="monographObj.content" />
        </el-form-item>
        <el-form-item label="首页">
          <el-switch v-model="monographObj.show"> </el-switch>
        </el-form-item>
        <el-form-item v-if="monographObj.id == undefined" label="语言">
          <el-select v-model="monographObj.i18n">
            <el-option label="中文" value="zh"></el-option>
            <el-option label="英文" value="en"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          style="margin-left: 12px"
          type="success"
          @click="handleUpdateMonograph"
          v-if="monographObj.id"
          >更新</el-button
        >
        <el-button
          style="margin-left: 12px"
          type="primary"
          @click="handleAddMonograph"
          v-else
          >添加</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  addMonograph,
  deleteMonograph,
  getMonographs,
  updateMonograph,
} from "@/api/monograph";
import SimpleEditor from "@/components/Editor/simple";

export default {
  components: { SimpleEditor },
  data() {
    return {
      list: [],
      listLoading: true,
      drawer: false,
      monographObj: {
        content: "",
        i18n: "zh",
        show: false,
      },
      host: process.env.VUE_APP_BASE_API,
      filter: "",
      filterList: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getMonographs().then((res) => {
        this.list = res.data.lists;
        this.filterList = this.list;
        this.listLoading = false;
      });
    },
    handleFilterChange(val) {
      if(val.length == 0) {
        this.filterList = this.list
      }
      let filterList = [];
      this.list.map(item => {
        if(item.content.indexOf(val) > -1) {
          filterList.push(item)
        }
      });
      this.filterList = filterList;
    },
    handleFilterReset(){
      this.filter = ""
      this.filterList = this.list;
    },
    beforeAddMonograph() {
      if (this.monographObj.id) {
        this.monographObj = {
          content: "",
          i18n: "zh",
          show: false,
        };
      }
      this.drawer = true;
    },
    beforeUpdataMonograph(obj) {
      this.monographObj = JSON.parse(JSON.stringify(obj));
      this.monographObj.show = obj.show == 1;
      this.drawer = true;
    },
    handleAddMonograph() {
      let tmp = JSON.parse(JSON.stringify(this.monographObj));
      tmp.show = tmp.show ? "1" : "0";
      addMonograph(tmp).then((res) => {
        this.drawer = false;
        this.fetchData();
      });
    },

    handleUpdateMonograph() {
      let tmp = JSON.parse(JSON.stringify(this.monographObj));
      tmp.show = tmp.show ? "1" : "0";
      let id = tmp.id;
      delete tmp.id;
      delete tmp.i18n;

      updateMonograph(id, JSON.stringify(tmp)).then((res) => {
        this.drawer = false;
        this.fetchData();
      });
    },

    handleDeletMonograph(obj) {
      deleteMonograph(obj.id).then((res) => {
        if (res.code && res.code == 200) {
          this.fetchData();
        }
      });
    },
  },
};
</script>
<style>
.el-table th.gutter {
  /* 
    * 解决element-ui 表格篡位的问题 👇 
    */
  display: table-cell !important;
}
</style>